<template>
	<!-- 盲盒 -->
	<view>
		<!-- 顶部区域 -->
		<view class="topnav">
			<!-- 搜索 -->
			<view class="searchs">
				<image src="/static/images//blindbox/xinxuanhezi.png" class="namepic"></image>
				<view class="search">
					<view class="search_main">
						<image src="/static/images/mall/search.png" @click="onSearch"></image>
						<input type="text" confirm-type="search" v-model="key_word" @input="onInput" @confirm="onSearch" placeholder="输入商品关键字搜索" placeholder-style="color:#FFFFFF;font-size:26rpx" />
					</view>
				</view>
				<!-- <image src="/static/images//minecenter/kefu.png" class="kefuicon"></image> -->
			</view>
			<!-- banner -->
			<banner :bannerList="bannerList" @navDetails="navDetails" />
		</view>
		<view class="tag">
			<view class="tag_item">
				<image src="/static/images//minecenter/zhengpin.png"></image>
				<text style="font-size: 25rpx;">官方正品</text>
			</view>
			<view class="tag_item">
				<image src="/static/images//minecenter//huishou.png"></image>
				<text style="font-size: 25rpx;">不喜欢可一键回收</text>
			</view>
			<view class="tag_item">
				<image src="/static/images//minecenter///baoyou.png"></image>
				<text style="font-size: 25rpx;">三件包邮</text>
			</view>
		</view>
		<view class="tool">
			<view class="tool_item" @click="toOuqibang()">
				<image src="/static/images/blindbox/ouqibang.png"></image>
				<text class="tool_item_title">欧气榜</text>
				<text class="tool_item_desc">吸欧气助力开好货</text>
			</view>
			<view class="tool_item" @click="toPackage()">
				<image src="/static/images/blindbox/baoguowu.png"></image>
				<text class="tool_item_title">包裹屋</text>
				<text class="tool_item_desc">不喜欢一键回收</text>
			</view>
		</view>
		<!-- 盲盒分类 -->
		<view class="tab" :class="{'navtop':istop}">
			<scroll-view scroll-x="true" enhanced="true" style="white-space: nowrap;">
				<view class="list" v-for="(item,index) in tablist" @click="changeType(index)" :class="{ active: curType === index}" :key="index">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 盲盒列表 -->
		<swiper class="swiper" id="swiper" :style="{height:`${height}rpx`}" indicator-active-color="#FFFFFF" :current="curType" :interval="5000" :duration="500"  @change="tabChange">
			<block v-for="(list,i) in goodsLists" :key="i">
				<swiper-item>
					<blindbox :goodsList="goodsList" goodsType="3" />
				</swiper-item>
			</block>
		</swiper>
		<!-- 加载更多 -->
		<pullDownRefresh :status="loading" style="padding-bottom: 130rpx;" />
		<!-- 底部导航 -->
		<tabBar :currentPage="1" :messageNum="messageNum" />
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar'
	import banner from '@/components/banner'
	import tabFilter from '@/components/tabFilter'
	import blindbox from '@/components/goodslist/index_box'
	import pullDownRefresh from '@/components/pullDownRefresh'
	export default {
		components:{
			tabBar,
			banner,
			tabFilter,
			blindbox,
			pullDownRefresh
		},
		data() {
			return {
				curType:0,//当前分类索引
				bannerList:[],
				tablist:[],//分类列表
				goodsList:[],//盲盒商品列表
				goodsLists:[],
				loading:0,
				page:1,
				height: 0,
				key_word:'',
				cateId:'',//当前分类id
				istop:false,//分类导航是否置顶
				accessId: 'b9f99880-f392-11ec-818d-a59265127335', // 接入号ID （参数类型：字符串，必传）
				clientId: '', //访客id
				urlTitle: '', //用户来源
				fromUrl: '', //用户来源
				otherParams: { //指定专属坐席和用户昵称以及发送商品链接
					nickName: ''
				},
				customField: { //自定义字段
					test: '在线客服自定义字段'
				},
				messageNum:0
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中...'
			})
			this.getShopbanner();
			this.getIndexInfo();
			this.getBlindboxlist();
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.getMyindex();
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title:'加载中...'
			})
			this.page = 1;
			this.goodsList = [];
			this.goodsLists = [];
			this.getShopbanner();
			this.getIndexInfo();
			this.getBlindboxlist();
		},
		onReachBottom() {
			this.page++;
			this.getBlindboxlist();
		},
		onPageScroll() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#swiper').boundingClientRect(data => {
				const { top } = data;
				if(top <= 70){
					this.istop = true;
				}else{
					this.istop = false;
				}
			}).exec();
		},
		methods: {
			//客服
			toService() {
				if(!uni.getStorageSync('token')){
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				}else{
					// this.clientId = uni.getStorageSync('userId');
					// this.otherParams.nickName = uni.getStorageSync('userName');
					// let hrefAddress = 'https://ykf-webchat.7moor.com/wapchat.html?accessId=' + this.accessId + '&clientId=' +
					// 	this.clientId + '&otherParams=' + JSON.stringify(this.otherParams) +
					// 	'&urlTitle=派箱箱APP&fromUrl=https://mh.mytshop.cn/h5/&customField=' + JSON.stringify(this.customField);
					// uni.navigateTo({
					// 	url: '/pages/index/customerService?href=' + encodeURIComponent(hrefAddress)
					// })
				}
			},
			getMyindex(){
				this.$api.myindex().then(res=>{
					this.messageNum = res.message_num;
					uni.setStorageSync('userName',res.user.user_name);
					uni.setStorageSync('userId',res.user.id);
				})
			},
			//跳转欧气榜
			toOuqibang(){
				 if(!uni.getStorageSync('token')){
				 	uni.showModal({
				 		title: '温馨提示',
				 		content: '登录后可继续操作，是否登录？',
				 		success: (res) => {
				 			if (res.confirm) {
				 				uni.navigateTo({
				 					url: '/pages/login/login'
				 				})
				 			}
				 		}
				 	})
				 }else{
				 	uni.navigateTo({
				 		url: '/pages/blindbox/rankinglist'
				 	})
				 }
			},
			//跳转背包
			toPackage(){
				 if(!uni.getStorageSync('token')){
				 	uni.showModal({
				 		title: '温馨提示',
				 		content: '登录后可继续操作，是否登录？',
				 		success: (res) => {
				 			if (res.confirm) {
				 				uni.navigateTo({
				 					url: '/pages/login/login'
				 				})
				 			}
				 		}
				 	})
				 }else{
				 	uni.navigateTo({
				 		url: '/pages/package/package'
				 	})
				 }
			},
			//获取盲盒分类
			getIndexInfo(){
				this.$api.getIndexInfo().then(res=>{
					this.tablist = res.category;
					this.cateId = this.tablist[0].id;
					this.tablist.map(item=>{
						this.goodsLists.push([]);
					})
				})
			},
			onInput({detail:{value}}){
				if(value === ''){
					this.page = 1;
					this.key_word = '';
					this.goodsList = [];
					this.getBlindboxlist();
				}
			},
			//搜索
			onSearch(){
				this.page = 1;
				this.goodsList = [];
				this.getBlindboxlist();
			},
			//获取商品轮播
			getShopbanner(){
				this.$api.shopbanner().then(res=>{
					this.bannerList = res;
				})
			},
			//跳转商品详情
			navDetails(url){
				uni.navigateTo({url})
			},
			//切换分类
			changeType(e){
				this.curType = e;
			},
			tabChange(e){
				this.page = 1;
				this.curType = e.detail.current;
				this.cateId = this.tablist[this.curType].id;
				this.goodsList = [];
				this.getBlindboxlist();
			},
			//获取盲盒列表
			getBlindboxlist(){
				this.loading = 1;
				this.$api.activityList({
					offset:this.page,
					activity_category_id:this.cateId,
					key_word:this.key_word
				}).then(res=>{
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if(res.length>0){
						this.loading = 0;
						res.map(item=>{
							if(item.label_name === null){
								item.label_name = [];
							}else{
								item.label_name = item.label_name.split(',');
							}
						})
						this.goodsList = this.goodsList.concat(res);
						this.height = 618 * Math.ceil(this.goodsList.length / 2);
					}else{
						this.loading = 3;
						// uni.showToast({
						// 	title:'没有更多了~',
						// 	icon:'none'
						// })
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-bottom: 68rpx;
}
.topnav{
	width: 750rpx;
	background-image: url("../../static/images/oneImage/beijingw.png");
	background-size: 100% 100%;
	box-sizing: border-box;
}
.searchs{
	@include between;
	padding: 104rpx 24rpx 24rpx;
	
	.namepic{
		width: 156rpx;
		height: 40rpx;
		margin-right: 24rpx;
	}
	.search{
		width: 420rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 30rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		@include between;
		
		&_main{
			padding: 14rpx 20rpx;
			@include align-center;
			
			image{
				width: 29rpx;
				height: 31rpx;
				margin-right: 15rpx;
			}
		}
	}
	.kefuicon{
		width: 54rpx;
		height: 54rpx;
	}
}
.tag{
	@include between;
	padding: 24rpx 30rpx 0 10rpx;
	
	&_item{
		@include align-center;
		
		image{
			padding-right: 5rpx;
			width: 45rpx;
			height: 45rpx;
		}
		text{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
}
.tool{
	@include center;
	
	&_item{
		width: 368rpx;
		height: 198rpx;
		position: relative;
		margin-top: 10rpx;
		image{
			width: 368rpx;
			height: 198rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		&_title{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1D1D1D;
			position: absolute;
			top: 30rpx;
			left: 30rpx;
		}
		&_desc{
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			position: absolute;
			top: 80rpx;
			left: 30rpx;
		}
	}
}
.tab{
	width: 750rpx;
	background-color: #FFFFFF;
	padding: 0 42rpx;
	margin: 28rpx 0 34rpx;
	
	.list {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		display: inline-block;
		margin-right: 54rpx;
		padding: 22rpx 0;
	}
	
	.active{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: $main_color;
		padding-bottom: 16rpx;
		border-bottom: 4rpx solid $main_color;
	}
}
.navtop{
	margin: 0;
	position: fixed;
	top: 0;
	z-index: 99999;
}
</style>
